<template>
  <view class="wrap">
    <view class="logo_box flex_c">
      <view class="logo">
        <image :src="imgUrl + 'logo-1.png'" mode="aspectFill"></image>
      </view>
      <!-- 		<view class="nickname">
				剂安安
			</view> -->
    </view>
    <view class="form">
      <view class="form_left">
        <view class="form_left_icon">
          <image :src="imgUrl + '1.png'" mode="aspectFill"></image>
        </view>
        <view class="form_left_input">
          <input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号码" placeholder-style="font-size: 30rpx;font-weight: 400;color: #b1b2b5;">
        </view>
      </view>
    </view>
    <view class="form">
      <view class="form_left">
        <view class="form_left_icon">
          <image :src="imgUrl + '1.png'" mode="aspectFill"></image>
        </view>
        <view class="form_left_input" style="width: 280rpx;">
          <input type="number" v-model="code" placeholder="请输入验证码" placeholder-style="font-size: 30rpx;font-weight: 400;color: #b1b2b5;">
        </view>
      </view>
      <view class="form_right">
        <u-toast ref="uToast"></u-toast>
        <u-code :seconds="seconds" changeText="Xs" startText="验证码" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
        <u-button @tap="getCode" custom-style="{border:'none'}">{{tips}}</u-button>
      </view>
    </view>
    <view class="form">
      <view class="form_left">
        <view class="form_left_icon">
          <image :src="imgUrl + '2.png'" mode="aspectFill"></image>
        </view>
        <view class="form_left_input">
          <input type="password" v-model="password" placeholder="设置密码" placeholder-style="font-size: 30rpx;font-weight: 400;color: #b1b2b5;">
        </view>
      </view>
    </view>
    <view class="tips_box flex_b">
      <view class="tips_left">
        <view class="tips_left_icon" @click="isPick = !isPick">
          <image v-if="isPick" :src="imgUrl + '5.png'" mode="aspectFill"></image>
          <image v-else :src="imgUrl + '6.png'" mode="aspectFill"></image>
        </view>
        <view class="tips_left_text">
          已同意<text @click="$u.route('/pages/login/privacyPact?type=2')">隐私协议</text>及<text @click="$u.route('/pages/login/privacyPact?type=1')">用户协议</text>
        </view>
      </view>
    </view>
    <view class="submit" @click="setMobileFun">
      立即注册
    </view>
    <view class="register" @click="$u.route('/pages/login/login')">
      密码登录
    </view>
  </view>
</template>

<script>
import { setVerify, setMobile } from '@/api/api'
export default {
  data() {
    return {
      phone: '',
      isPick: true,
      tips: '',
      seconds: 60,
      code: '',
      password: ''
    }
  },
  methods: {
    setMobileFun() {
      const that = this
      const { phone, code, password, isPick } = this
      if (phone == "") {
        return uni.$u.toast('请输入手机号码');
      }
      if (code == "") {
        return uni.$u.toast('请输入验证码');
      }
      if (password == "") {
        return uni.$u.toast('请输入密码');
      }
      if (isPick) {
        return uni.$u.toast('请先同意隐私，用户协议');
      }
      uni.showLoading({
        title: '注册中'
      })
      setMobile({
        phone: phone,
        verify: code,
        password: password
      }).then((res) => {
        uni.hideLoading();
        uni.$u.toast('注册成功');
        uni.setStorageSync("token", res.data.token)
        that.$store.commit("LOGIN", {
          'token': res.data.token,
          'time': 60 * 60 * 24 * 7
        });
        uni.setStorageSync("bind_phone", 1)
        uni.reLaunch({
          url: '/pages/tabbar/index'
        })
      }).catch((e) => {
        uni.hideLoading();
        uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
      })
    },
    doLogin() {
      let that = this
      this.butLoding = true
      doLogin(this.form).then(ref => {
        console.log('ref', ref)
        this.butLoding = false
        that.$store.commit("LOGIN", {
          'token': ref.data.token,
          'time': 60 * 60 * 24 * 7
        });
        uni.setStorageSync("bind_phone", 1)
        this.$u.toast('注册成功')
        uni.navigateBack({
          delta: 1
        })
        // uni.$u.route({
        // 	url: '/pages/home',
        // 	type: 'redirect'
        // });
      })
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      const { phone } = this
      if (phone == "") {
        return uni.$u.toast('请输入手机号码');
      }
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        setVerify({
          phone: phone,
          scene: 'register'
        }).then((res) => {
          uni.hideLoading();
          uni.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }).catch((e) => {
          uni.hideLoading();
          uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
        })


      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    end() {
      // uni.$u.toast('倒计时结束');
    },
    start() {
      uni.$u.toast('验证码已发送');
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  width: 750rpx;
  max-height: 1400rpx;
  padding-top: 200rpx;
  overflow: hidden;
  box-sizing: border-box;
  .logo_box {
    margin-bottom: 92rpx;
    .logo {
      width: 266rpx;
      height: 114rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .nickname {
      margin-left: 18rpx;
      font-size: 50rpx;
      color: #434242;
    }
  }
  .form {
    margin: 0 auto 36rpx;
    width: 510rpx;
    height: 130rpx;
    background: #f6f7fb;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50rpx 0 40rpx;
    .form_left {
      display: flex;
      align-items: center;
      .form_left_icon {
        width: 49rpx;
        height: 49rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .form_left_input {
        width: 300rpx;
        margin-left: 12rpx;
        font-size: 38rpx;
        font-weight: bold;
        color: #434242;
      }
    }
    .form_right {
      font-size: 30rpx;
      font-weight: bold;
      text-align: right;
      color: #942a2a;
    }
  }
  .tips_box {
    margin: 0 82rpx;
    .tips_left {
      display: flex;
      align-items: center;
      .tips_left_icon {
        width: 28rpx;
        height: 28rpx;
        font-size: 0;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .tips_left_text {
        margin-left: 15rpx;
        font-size: 24rpx;
        color: #737373;
        text {
          margin: 0 6rpx;
          color: #497de3;
        }
      }
    }
  }
  .submit {
    margin: 133rpx auto 52rpx;
    width: 586rpx;
    height: 100rpx;
    background: #2767e6;
    border-radius: 50rpx;
    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 185, 255, 0.2);
    font-size: 30rpx;
    line-height: 100rpx;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
  }
  .register {
    font-size: 30rpx;
    text-align: center;
    color: #434242;
  }
}
.u-button--info {
  font-size: 30rpx;
  font-weight: bold;
  text-align: right;
  color: #942a2a;
  width: 120rpx;
  padding: 0;
  background-color: transparent;
  border: none;
}
.u-button--info::before {
  background-color: transparent;
}
::v-deep {
  .u-button {
    border: none !important;
    background: transparent !important;
    color: #942a2a !important;
  }
  .u-button::before {
    background-color: transparent !important;
  }
}
</style>
